<template>
  <div>
    <!-- 背景 -->
    <div class="page-bg"></div>
    <div class="page-wrap">
      <!-- 标题 -->
      <h2>接线图</h2>
      <!-- 站室信息 -->
      <div class="card station-room">
        <span>站室名称</span>
        <h3>{{ model.statroomname }}</h3>
        <span>站室编号</span>
        <h3>{{ model.statroomnumber }}</h3>
      </div>
      <!-- 电子接线图 -->
      <div class="card imgbox">
        <h4>电子接线图</h4>
        <DrawView
          v-if="model.statroomnumber"
          :model="model"
          class="cavs"
        ></DrawView>
        <!-- <div id="previewCanvas" class="cavs"></div> -->
        <!-- <img class="img" src="../assets/images/img2.png" alt="" /> -->
      </div>
      <!-- 现场图版 -->
      <div class="card imgbox">
        <h4>现场图版</h4>
        <img class="img" src="../assets/images/img.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import DrawView from "@/components/drawView.vue";
export default {
  name: "electDrawList",
  components: { DrawView },
  data() {
    return {
      model: {
        statroomname: "",
        statroomnumber: "",
        verifyjson: "",
      },
    };
  },
  mounted() {
    if (this.$route.query) {
      this.model.statroomname = this.$route.query.statroomname;
      this.model.statroomnumber = this.$route.query.statroomnumber;
    }
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(180deg, #00796a 0%, #f4f5f9 50%);
}

.page-wrap {
  position: relative;
  z-index: 1;
  padding: 20px 30px;
}

.station-room {
  display: grid;
  gap: 20px;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;

  span {
    font-size: 31px;
    color: #666666;
  }

  h3 {
    background: #eef1f4;
    border-radius: 7px;
    padding: 18px;
    font-size: 31px;
    color: #333333;
  }
}

.imgbox {
  h4 {
    font-size: 31px;
    color: #333333;
    text-align: center;
    margin-bottom: 20px;
  }

  .cavs {
    width: 100%;
    height: 500px;
    display: block;
  }
}
</style>
